<template>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="50%"
      :before-close="cancelClick"
    >
      <el-form class="houseForm" :model="ruleForm" ref="ruleForm" :rules="rules" label-width="100px">
        <el-form-item label="楼宇名称" prop="buildingName">
          <el-input v-model="ruleForm.buildingName" placeholder="请输入楼宇名称"></el-input>
        </el-form-item>
  
        <el-form-item label="小区单元" prop="unit">
          <el-input v-model="ruleForm.unit" placeholder="请输入小区单元"></el-input>
        </el-form-item>
  
        <el-form-item label="总使用面积" prop="usableArea">
          <el-input-number type="number" v-model="ruleForm.usableArea"></el-input-number>
        </el-form-item>
  
        <el-form-item label="层数" prop="layersNumber">
          <el-input-number type="number" v-model="ruleForm.layersNumber"></el-input-number>
        </el-form-item>
  
        <el-form-item label="房间数" prop="roomNumber">
          <el-input-number type="number" v-model="ruleForm.roomNumber"></el-input-number>
        </el-form-item>

        <el-divider class="divider"></el-divider>
        <el-form-item class="addHouseFormButton">
          <el-button @click="cancelClick">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </template>
  
<script>
import api from '@/api';
import { cloneDeep } from 'lodash'; // 引入 lodash 的深拷贝方法
export default {  
    props: {
        title: {
          type: String,
          default: '新增楼宇'
        },
        visible: {
            type: Boolean,
            required: true,
        },
        formData: {
            type: Object,
            default: () => ({}), // 默认值为空对象
        },
    },
    data() {
      return {
        ruleForm: {
          buildingName: '',
          unit: '',
          usableArea: '',
          layersNumber: '',
          roomNumber: ''
        },
        rules: {
          buildingName: [{ required: true, message: '请输入楼宇名称', trigger: 'blur' }],
          unit: [{ required: true, message: '请输入小区单元', trigger: 'blur' }],
          usableArea: [
            { required: true, message: '请输入总使用面积', trigger: 'blur'},
            { pattern: /^([1-9]\d*)(\.\d+)?$/, message: '请输入正数', trigger: 'blur' }
        ],
          layersNumber: [
            { required: true, message: '请输入层数', trigger: 'blur'},
            { pattern: /^([1-9]\d*)(\.\d+)?$/, message: '请输入正数', trigger: 'blur' }
        ],
          roomNumber: [
            { required: true, message: '请输入房间数', trigger: 'blur'},
            { pattern: /^([1-9]\d*)(\.\d+)?$/, message: '请输入正数', trigger: 'blur' }
        ]
        }
      };
    },
    methods: {
      cancelClick() {
        this.ruleForm = {
          buildingName: '',
          unit: '',
          usableArea: '',
          layersNumber: '',
          roomNumber: ''
        }
        this.$emit('update:visible', false);
        this.$emit('update:title', '新增楼宇');
        this.$refs['ruleForm'].resetFields();
        this.$emit('updateFormData', {});
      },
      submitForm() {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            api.saveOrUpdateBuild(this.ruleForm).then(res =>{
              if(res.type === 'error'){
                this.$message.error(res.message)
              }else if(res.data.code === 200){
                this.cancelClick()
                this.$message({
                  message: '操作成功',
                  type: 'success'
                });
                location.reload();
              }else{
                this.$message.error(res.data.message)
              }
            })
          } else {
            return false;
          }
        });
      }
    },
    watch: {
        // 监听 formData 的变化
        formData: {
            handler(newVal) {
                if (newVal && Object.keys(newVal).length > 0) {
                  // 深拷贝 formData 并赋值给 ruleForm
                  this.ruleForm = cloneDeep(newVal);
                }
            },
            immediate: true, // 立即执行一次
            deep: true, // 深度监听
        },
    } 
  };
  </script>
  
<style scoped>
.houseForm .el-form-item{
    margin-left: 20%;
}
.houseForm .el-input{
    width: 60%;
}
.houseForm .addHouseFormButton{
    float: right;
    margin-top: -15px;
  } 
.houseForm .divider{
    margin-top: 20px;
}

</style>
  